<template>
    <div>选择文件并上传</div>
    <el-upload
        class="upload-country"
        action="http://localhost:8888/hive/upload"
        :on-success="handleSuccess"
    >
        <el-button type="primary">点击上传文件</el-button>
    </el-upload>
    <div v-if="countryData.length>0">
        <h2>成功解析数据！</h2>
        <el-table-v2
            :columns="columns"
            :data="countryData"
            :width="1200"
            :height="400"
        />
    </div>
    <div v-if="errorData.length>0">
        <h2>解析失败数据</h2>
        <el-table-v2
            :columns="columns2"
            :data="errorData"
            :width="1200"
            :height="400"
        />
    </div>
</template>

<script setup lang="ts">
import {UploadProps} from 'element-plus';
import {CountryVO} from "@/types/country";

const columns: Array<{ key: keyof CountryVO; title: string; dataKey: keyof CountryVO }> = [
    {
        key: 'country',
        title: '国家名称',
        dataKey: 'country',
        width: 100,
    },
    {
        key: 'year',
        title: '观察年',
        dataKey: 'year',
        width: 100,
    },
    {
        key: 'systemicCrisis',
        title: '系统性危机',
        dataKey: 'systemicCrisis',
        width: 100,
    },
    {
        key: 'exchUsd',
        title: '国家对美元汇率',
        dataKey: 'exchUsd',
        width: 100,
    },
    {
        key: 'domesticDebtInDefault',
        title: '主权内债违约',
        dataKey: 'domesticDebtInDefault',
        width: 100,
    },
    {
        key: 'sovereignExternalDebtDefault',
        title: '主权外债违约',
        dataKey: 'sovereignExternalDebtDefault',
        width: 100,
    },
    {
        key: 'gdpWeightedDefault',
        title: '相对于GDP的违约总债务',
        dataKey: 'gdpWeightedDefault',
        width: 100,
    },
    {
        key: 'inflationAnnualCpi',
        title: '年度CPI通货膨胀率',
        dataKey: 'inflationAnnualCpi',
        width: 100,
    },
    {
        key: 'independence',
        title: '独立性',
        dataKey: 'independence',
        width: 100,
    },
    {
        key: 'currencyCrises',
        title: '货币危机',
        dataKey: 'currencyCrises',
        width: 100,
    },
    {
        key: 'inflationCrises',
        title: '通货膨胀危机',
        dataKey: 'inflationCrises',
        width: 100,
    },
    {
        key: 'bankingCrisis',
        title: '银行危机',
        dataKey: 'bankingCrisis',
        width: 100,
    }
]
const columns2: Array<{ key: keyof CountryVO; title: string; dataKey: keyof CountryVO }> = [
    ...columns,
    {
        key: 'errorFiled',
        title: '错误字段',
        dataKey: 'errorFiled',
        width: 100,
        style:{
            color:'red'
        }
    },
    {
        key: 'errorMsg',
        title: '错误信息',
        dataKey: 'errorMsg',
        width: 100,
        style:{
            color:'red'
        }
    }
]
const countryData = ref<CountryVO[]>([])
const errorData = ref<CountryVO[]>([])
const handleSuccess: UploadProps['onSuccess'] = (response) => {
    const data: CountryVO[] = response;
    countryData.value = data.filter(item => !item.isError);
    errorData.value = data.filter(item => item.isError);
}
</script>

<style scoped lang="scss">

</style>
